<template>
  <div style="width: 100%; height: 210px; background: rgba(0, 0, 0, 0.03); border-radius: 8px; margin: 0 auto;"
       v-if="!entity.visitAuthSuccess">
    <span class="lockText"><i class="el-icon-lock"></i>
      该文章<span v-if="entity.loadingArea == 1">部分</span>内容已隐藏</span>

    <div style="width: 95%; height: 150px; background: #FFF; margin: 10px auto; border-radius: 8px;">
      <span v-for="item in visitAuthDictList" v-if="entity.visitAuth == parseInt(item.dictValue)" :key="item.uid"
            class="pay-tag"><i></i>{{ item.dictLabel }}</span>

      <span class="img-badge" v-if="entity.visitAuth == 6">已售 {{entity.payOrderCount}}</span>

      <div class="payBody" v-if="entity.visitAuth == 6">
        <span>
          <i class="el-icon-coin"></i>
          <span class="priceFont">
            <span v-if="entity.payType == 1">
              {{ entity.price }}
            </span>
            <span v-else>
              {{ entity.price / 100 }}
            </span>
          </span>
          <span v-if="entity.payType == 1">
            积分
          </span>
          <span v-else>
            元
          </span>
        </span>
        <el-button type="primary" style="float: right; margin-right: 20px;" size="small" @click="actionNow(entity.visitAuth)">
          {{ getVisitAuthName() }}
        </el-button>
      </div>

      <div class="pay-doc" v-for="item in visitAuthDictList" v-if="entity.visitAuth == parseInt(item.dictValue)"
           :key="item.uid + item.uid">{{ item.remark }}
      </div>

      <div style=" text-align: center; margin-top: 15px;" v-if="entity.visitAuth != 6">
        <el-button type="primary" size="small" @click="actionNow(entity.visitAuth)">{{ getVisitAuthName() }}</el-button>
      </div>

    </div>
    <PasswordInput v-if="showPasswordInput" :entity="entity" resourceType="BLOG"  @passwordCallback="passwordCallback"></PasswordInput>
    <PayWindow v-if="showPayWindow" :product="productVO" @payCallback="payCallback"></PayWindow>
    <LoadingValid v-if="showLoadingValid" @loadingValidCallback="loadingValidCallback"></LoadingValid>
  </div>

</template>

<script>
import {getListByDictTypeList} from "@/api/sysDictData";
import PayWindow from "../PayWindow"
import LoadingValid from "../LoadingValid"
import PasswordInput from "./password_input.vue"
import {mapMutations} from "vuex";

export default {
  name: "index",
  props: ['entity', "resourceType"],
  data() {
    return {
      visitAuthName: "",
      visitAuthDictList: [],
      showPayWindow: false,
      productVO: {},
      showLoadingValid: false,
      showPasswordInput: false,
    }
  },
  watch: {
    // 监听领域事件
    '$store.state.app.domainEventMessage': function (event, oldFlag) {
      console.log("[VisitAuthCard]处理领域事件", event)
      this.domainEventHandler(event)
    },
  },
  created() {
    this.getDictList()
  },
  components: {
    PayWindow,
    LoadingValid,
    PasswordInput,
  },
  methods: {
    ...mapMutations(['setLoginMessage']),
    getVisitAuthName() {
      let visitAuth = this.entity.visitAuth
      switch (visitAuth) {
        case 1: {
          return "立即查看"
        }
        case 2: {
          return "立即登录"
        }
        case 3: {
          return "立即评论"
        }
        case 4: {
          return "立即验证"
        }
        case 5: {
          return "成为会员"
        }
        case 6: {
          return "立即购买"
        }
        case 7: {
          return "立即点赞"
        }
        case 8: {
          return "立即收藏"
        }
        case 9: {
          return "立即关注"
        }
        case 10: {
          return "输入密码"
        }
        case 11: {
          return "仅作者可见"
        }
        case 12: {
          return "联系作者"
        }
        case 13: {
          return "联系作者"
        }
      }
    },
    /**
     * 字典查询
     */
    getDictList: function () {
      let dictTypeList = ['sys_visit_auth']
      getListByDictTypeList(dictTypeList).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          let dictMap = response.data;
          this.visitAuthDictList = dictMap.sys_visit_auth.list
        }
      });
    },
    // 将action转化为对应的权限code
    convertVisitAuth(action) {
      switch (action) {
        case this.$EAction.Comment: {
          return 3;
        }
        case this.$EAction.Pay: {
          return 6;
        }
        case this.$EAction.Praise: {
          return 7;
        }
        case this.$EAction.Collect: {
          return 8;
        }
      }
      return 0;
    },
    domainEventHandler(event) {
      if (event.type != "action") {
        return
      }
      // 如果当前的资源
      let visitAuth = this.convertVisitAuth(event.action)
      if (event.resourceUid == this.entity.uid && visitAuth == this.entity.visitAuth) {
        this.$emit("refresh", "")
      }
    },
    actionNow(visitAuth) {
      let isLogin = this.$store.state.user.isLogin
      switch (visitAuth) {
        case 1: {
          this.$emit("refresh", "")
          return
        }
        case 2: {
          // 弹出登录框
          this.setLoginMessage(Math.random())
          return
        }
        case 3: {
          // 弹出评论框
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.$message.info("请先到内容下方，完成评论")
          return
        }
        case 4: {
          // 弹出人机验证框
          this.showLoadingValid = true
          return
        }
        case 5: {
          // 弹出验证框
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.$message.info("该内容为会员专属内容，请先成为会员后查看")
          return
        }
        case 6: {
          // 弹出支付框
          this.productVO = this.$commonUtil.convertArticle(this.entity)
          this.showPayWindow = true
          return
        }
        case 7: {
          // 弹出点赞提示
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.$message.info("在内容左侧，点击点赞按钮")
          return
        }
        case 8: {
          // 弹出点赞提示
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.$message.info("在内容左侧，点击收藏按钮")
          return
        }
        case 9: {
          // 弹出登录提示
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.$message.info("在内容右侧，点击作者卡片完成关注")
          return
        }
        case 10: {
          // 弹出登录提示
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.showPasswordInput = true
          return
        }
        case 11: {
          // 弹出登录提示
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.$message.info("仅文章作者才有权限阅读")
          return
        }
        case 12: {
          // 弹出登录提示
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.$message.info("该文章仅开放给指定标签用户")
          return
        }
        case 13: {
          // 弹出登录提示
          if (!isLogin) {
            this.setLoginMessage(Math.random())
            return
          }
          this.$message.info("该文章仅开放给指定用户")
          return
        }

      }
    },
    // 输入密码回调
    passwordCallback(type) {
      this.showPayWindow = false
      // 支付成功，刷新页面
      if (type == 1) {
        this.$emit("refresh", "")
      }
    },
    payCallback(paySuccess) {
      this.showPayWindow = false
      // 支付成功，刷新页面
      if (paySuccess) {
        this.$emit("refresh", "")
      }
    },
    // 加载校验成功
    loadingValidCallback(type) {
      this.showLoadingValid = false
      if (type == 1) {
        this.$emit("refresh", "")
      }
    },
  },
}
</script>

<style scoped>
.lockText {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  margin-top: 10px;
  margin-left: 10px;
  color: #999;
}

.pay-tag {
  font-size: 13px;
  padding: 3px 10px;
  right: auto;
  width: auto;
  top: 10px;
  background: linear-gradient(135deg, #ff74cd 10%, #ec7d0b 100%);
  color: #fff;
  border-radius: 8px 0 8px 0;
  line-height: 1.4;
  z-index: 1;
}

.img-badge {
  float: right;
  right: 0;
  border-radius: 50px 0 0 50px;
  text-shadow: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
  z-index: 1;
  padding: 0.2em 0.6em;
  background: linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
  color: #fff;
  font-size: 12px;
}

.payBody {
  height: 45px;
  margin-top: 20px;
  margin-left: 10px;
}

.pay-doc {
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  margin-top: 20px;
  padding-top: 10px;
  white-space: pre-wrap;
  color: #999;
  font-size: 13px;
  text-align: center;
}

.priceFont {
  font-size: 30px;
}
</style>
